define(['./../initial', './../service/prjStatusChartModalHelper'], function() {
    var app = angular.module('App.prjStatus');
    app.directive('prjStatusModal', ['$timeout', 'prjStatusChartModalHelper', '$rootScope',
        function($timeout, prjStatusChartModalHelper, $rootScope) {
            return {
                restrict: 'A',
                scope: {
                    prjStatusInformation: '='
                },
                link: function(scope, el, attrs) {
                    var modal = $('#singleChartModal');
                    //total lenth pics
                    init();

                    scope.close = function() {
                        modal.modal('hide');
                    };

                    function init() {
                        scope.imgCount = scope.prjStatusInformation.prjImgUrls.length;
                        scope.curImgIndex = 1;
                        scope.showInfo = false;
                        scope.$watch('prjStatusInformation', function(newValue, oldValue) {
                            if (!scope.prjStatusInformation) return;
                            //create modal

                            modal.modal({
                                detachable: false,
                                onVisible: function() {
                                    var mmm = $('#singleChartModal');
                                    var height = mmm.height();
                                    modal.css({
                                        'margin-top': '-' + (height / 2 + 50) + "px",
                                        "top": ""
                                    });
                                }
                            });
                            var slides = $('#slides');
                            modal.modal('show');
                            slides.slidesjs({
                                navigation: false,
                                pagination: false,
                                callback: {
                                    loaded: function(number) {
                                        scope.curImgIndex = number;
                                        scope.showInfo = true;

                                        var h = slides.height();

                                        slides.find('.slidesjs-slide').height(h);
                                        // slides.find('.prj-img').height(h);

                                    },
                                    start: function(number) {
                                        scope.showInfo = false;
                                        scope.$apply();
                                    },
                                    complete: function(number) {
                                        scope.curImgIndex = number;
                                        scope.showInfo = true;
                                        scope.$apply();
                                    }
                                }
                            });
                            var height = modal.height();

                            modal.css({
                                'margin-top': '-' + (height / 2 + 50) + "px",
                                "top": ""
                            });

                        }, true);
                    }
                },
                templateUrl: 'partials/prjStatusModal.html'
            };
        }
    ]);
});
